<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS组合选择器示例</title>
    <style type="text/css">
        h1~p {
            color: black;
        }
        nav ul li a {
            color: red;
        }
        article > h3 {
            color: green;
        }
        h3 + p {
            color: lightcoral;
        }
    </style>
</head>
<body>
    <header>
        <h1 align="center">石家庄学院</h1>
        <p align="center">数学教育</p>
        <hr>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">学生风采</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <hr>
    <main>
        <section>
            <h2>最新文章</h2>
            <article>
                <h3>文章标题</h3>
                <p>这里是文章的内容简介<br>可以使用&lt;br&gt;标签进行换行</p>
                <p>想了解石家庄学院</p>
            </article>
        </section>
    </main>
    <hr>
    <footer>
        版权所有 &copy; 2025石家庄学院
    </footer>
</body>
</html>